<!--课程评论区域-->
<template>
  <div style="font-family: tahoma, '微软雅黑'; font-size: 20px">
    <div
      style="
        font-size: 25px;
        margin: 5px;
        margin-left: 0px;
        margin-bottom: 40px;
        font-family: tahoma, '微软雅黑';
        font-weight: bold;
      "
    >
      课程评价：
    </div>
    分数：
    <!-- <input type="text" v-model="commentScore" placeholder="请输入评价分数（1-10分）" class="commentScore" style="font-family: tahoma,'微软雅黑';width: 160px;height:26px;"> -->
    <el-input
      class="commentScore"
      v-model="commentScore"
      placeholder="请输入评价分数（1-10分）"
      style="width: 500px"
    ></el-input>
    &nbsp;<br /><br />
    内容：
    <!-- <el-input class="commentText" v-model="commentText" placeholder="请输入评价内容！" style="width:300px;"></el-input> -->
    <el-input
      type="textarea"
      :autosize="{ minRows: 3, maxRows: 10 }"
      placeholder="请输入评价内容"
      class="commentText"
      v-model="commentText"
      style="width: 500px"
    >
    </el-input>
    <!-- <button @click="commentSave()">点击评价</button> -->
    <el-button type="success" @click="commentSave()">点击评价</el-button>
    <br />
    <span>&nbsp;&nbsp;</span>
    <div
      v-for="(item, index) in list"
      :key="index"
      style="font-size: 17px; margin-top: 15px; background-color: #f5f5dc"
    >
      <div style="position: absolute; margin-top: 15px; margin-left: 5px">
        <!-- <img :src='item.userImage' style="border-radius:50%;width: 40px;aspect-ratio: auto 40 / 40;height: 40px;"/> -->
        <el-col :span="12">
          <div class="sub-title"></div>
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="50" :src="item.userImage"></el-avatar>
            </div>
            <div class="block" v-for="size in sizeList" :key="size">
              <el-avatar :size="size" :src="circleUrl"></el-avatar>
            </div>
          </div>
        </el-col>
      </div>
      <div style="margin-left: 66px; font-family: tahoma, '微软雅黑'">
        <div style="height: 30px">
          <div
            style="
              font-family: tahoma, '微软雅黑';
              margin-top: 15px;
              font-size: 18px;
              font-weight: bold;
              float: left;
            "
          >
            {{ item.userName }}
          </div>
          <span
            style="
              font-family: tahoma, '微软雅黑';
              margin-top: 15px;
              float: right;
              font-size: 15px;
              color: grey;
              margin-right: 15px;
            "
            >{{ item.score }}分</span
          >
        </div>
        <div
          style="
            font-family: tahoma, '微软雅黑';
            font-size: 16px;
            margin-top: 15px;
          "
        >
          {{ item.content }}
        </div>
        <br />
        <div
          style="
            font-family: tahoma, '微软雅黑';
            margin-top: -5px;
            float: right;
            font-size: 15px;
            color: grey;
            margin-right: 15px;
          "
        >
          评价时间：{{ item.time }}
        </div>
      </div>
      <br />
    </div>
  </div>
</template>


<script>
import { commentList, comment } from "~/api/course.js";
import { mapMutations, mapState } from "vuex";
export default {
  name: "Comment",
  data() {
    return {
      list: [],
      commentText:"",
      commentScore:"",
    };
  },
  mounted() {
    commentList({ courseId: this.$parent.courseInfo.id }).then((res) => {
      if (res.data.code === 200) {
        console.log(res);
        console.log(res.list);
        this.list = res.data.data.list;
      } else {
        console.log("评价获取失败！");
      }
    });
  },
  methods: {
    commentSave() {
      var e1 = this.commentText;
      var e3 = this.commentScore;
      var e2 = this.$parent.courseInfo.id;
      var reg = /^([1-9]||10)$/ig; //正则表达式对象
      if(!reg.test(e3)){
        alert("请正确输入1-10的分数")
      }else{
        if (e1 == "" || e1 == null) {
                console.log(e3)

                console.log()
                alert("评价不能为空！");
              }else{
                comment({ courseId: e2, content: e1, score: e3 }).then((res) => {
                if (res.data.code === 200) {
                  window.location.reload();
                } else {
                  console.log("评价save失败！");
                }
              });
      }
      }
      
      
    },
  },
};
</script>
<style lang="scss" rel="stylesheet/scss">
</style>
